<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-21 16:43:09
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-13 16:23:58
 * @Description: 我的页面
-->
<template>
  <view class="">
    <view class="header"> 统计 </view>
    <view class="titleBox">
      <image :src="userInfo?.headUrl" mode="scaleToFill" />
      <view class="info">
        <view class="title">{{ userInfo?.nickName }} </view>
        <view class="subTitle">邀请码：{{ userInfo?.userCode }}</view>
      </view>
    </view>
    <view class="main">
      <view class="orderBox" style="margin-top: 20rpx">
        <CommonTitle title="我的服务" titleFontSize="32rpx" isShow />
        <u-cell-group :border="false">
          <u-cell :border="false" icon="../../static/wddd.png" title="我的订单" isLink @click="goPage('/pages/myPage/orderList')" />
          <u-cell :border="false" icon="../../static/zfb.png" title="绑定支付宝" isLink @click="goPage('/pages/myPage/bindZFB')" />
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import CommonTitle from "../../components/commonTitle.vue";
import { goPage } from "../../utils/commonFn";
import { selectKeFuInfo, selectUserInfoByUserId } from "../../api/my";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "../../stores/counter";
const userInfo = ref<myTypes.myInfo>();
const lxPhone = ref();
const { userLevelInfo } = useStore();
onShow(async () => {
  const userId = uni.getStorageSync("userId");
  if (!userId) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  const res = await selectUserInfoByUserId({ userId });
  uni.setStorageSync("userInfo", res);
  userInfo.value = res;
  const { cell } = await selectKeFuInfo();
  lxPhone.value = cell;
});
const goPhone = () => {
  uni.makePhoneCall({
    phoneNumber: lxPhone.value,
  });
};
</script>

<style lang="less" scoped>
.header {
  background: url(../../static/bg.png) no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 1;
  height: 526rpx;
  padding: 20px;
  font-size: 40rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  box-sizing: border-box;
}
.titleBox {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-top: -340rpx;
  margin-bottom: 50rpx;
  padding-left: 48rpx;
  image {
    width: 128rpx;
    height: 128rpx;
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    margin-right: 32rpx;
  }
  .info {
    .title {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      font-weight: 500;
      color: #fff;
    }
    .subTitle {
      font-size: 28rpx;
      font-weight: 500;
      color: #a8a8a8;
      line-height: 40rpx;
      margin-top: 20rpx;
    }
  }
}

.orderBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  padding-top: 1px;
  position: relative;
  z-index: 2;
}
/deep/ .u-cell__body {
  padding: 20rpx 0;
}
/deep/ .u-cell__left-icon-wrap {
  margin-right: 18rpx !important;
  .u-icon__img {
    width: 56rpx !important;
    height: 56rpx !important;
  }
}
</style>
